<template>
  <div class="shouchang" v-if="userItem">
    <div>
      <span>收藏到歌单</span>
    </div>
    <div class="sc-list">
      <ul>
        <li v-for="(item, index) in userItem" :key="index" @click="addSong(item.id)">
          <div class="img">
            <img :src="item.coverImgUrl" alt="" />
          </div>
          <div class="title">
            <div class="top">{{ item.name }}</div>
            <div class="bottom">999首</div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant';
import { getSubCount, addSong } from "../api/user";
export default {
    props:['playerId'],
  data() {
    return {
      uid: null,
      userItem: [],
    };
  },
  methods:{
   addSong(id){
       addSong({op:'add',pid:id,tracks:this.playerId}).then((data)=>{
        //    console.log(data)
        if(data.status==200){
            Toast('添加成功')
        }else{
            Toast('添加失败')
        }
       })
       console.log(this.playerId)
   }
  },
  created() {
    this.uid = window.localStorage.getItem("uid");
    console.log(this.uid);
  },
  watch: {
    uid() {
      getSubCount({
        uid: this.uid,
      }).then((data) => {
        console.log(data);
        //    this.userItem= data.playlist.filter((item)=>{
        //         item.userId ==this.uid
        //     })
        this.userItem = data.playlist.filter((item) => item.userId == this.uid);
        console.log(this.userItem);
      });
    },
  },
};
</script>

<style lang="less">
.shouchang {
  padding: 10px;
  overflow: auto;
  height: 300px;
  .sc-list {
    ul {
      // // height: 300px;
      // overflow:auto
      li {
        display: flex;
        margin: 10px 0;
        .img {
          width: 45px;
          height: 45px;
          border-radius: 6px;
          overflow: hidden;
          background-color: red;
          margin-right: 8px;
          img {
            width: 100%;
          }
        }
        .title {
          .bottom {
            color: #ccc;
            font-size: 14px;
          }
        }
      }
    }
  }
}
</style>